<template>
  <div class="dashboard-editor-container fiscal-container">
    <div class="ring-progress">
      <div
        style="height: 300px;"
        class="ring-box"
      >
        <circle-progress
          id="id"
          :width="300"
          :radius="20"
          :progress="100"
          duration="3000"
          :isAnimation="true"
          backgroundColor="#e5e9f2"
          :barColor="isOver ? '#67C23A' : 'rgba(64, 158, 255, 1)'"
          timeFunction="cubic-bezier(0.5, 0.5, 0.5, 0.5)"
        >
          <div v-show="!isOver">{{num + '%'}}</div>
        </circle-progress>
        <div class="success-box" v-show="isOver">已完成</div>
      </div>
      <div class="loading-info">
        <div>
          <i class="el-icon-circle-check green font-18">  成功：{{ entity.success }}</i>
        </div>
        <div class="mar-l-30">
          <i class="el-icon-circle-close red font-18">  失败：{{ entity.error }}</i>
        </div>
      </div>
      <div class="tips">
        效验失败的数据，您可以编辑后再次提交效验，也可以删除。
      </div>
      <div class="mar-t-30 flex-center">
        <el-button @click="$router.go(-1)">返回列表</el-button>
        <el-button type="primary" :disabled="!isOver" v-if="entity.error > 0" @click="downloadErrorDate">下载失败数据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import CircleProgress from 'vue-circleprogressbar'
  import { getToken } from '@/utils/auth'
  import { downloadErrorDate } from '@/api/user/member'
  export default {
    name: 'dashboard-index',
    components: {
      CircleProgress
    },
    data() {
      return {
        entity: {
          success: '0',
          error: '0',
          errorCode: ''
        },
        isOver: false,
        num: 0,
        setTime: null
      }
    },
    mounted() {
      this.token = { accessToken: getToken() }
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.entity) {
        this.entity = queryParams.entity
      }
      setTimeout(() => {
        this.isOver = true
      }, 3300)
      this.setTime = setInterval(() => {
        this.num++
      }, 33)
    },
    watch: {
      num: function(newData) {
        if (newData === 100) {
          clearInterval(this.setTime)
          this.setTime = null
        }
      }
    },
    methods: {
      downloadErrorDate() {
        window.open(downloadErrorDate(this.entity.errorCode), '_blank')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-num-box{
    text-align: center;
    padding-top: 20px;
    color: #333333;
  }
  .total-num-chart{
    font-size: 50px;
    letter-spacing: 18px;
    padding-top: 35px;
  }
  .timer-box{
    font-size: 36px;
    display: inline-block;
    border-bottom: #cccccc 1px solid;
    padding-bottom: 22px;
  }
  .timer-bar{
    padding-right: 230px;
  }
  .box-shadow{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
    background-color: rgba(255, 255, 255, 1);
  }
  .fiscal-container{
    padding: 32px;
    background-color: rgba(255, 255, 255, 1);
  }
  .enterprise-container{
    padding: 32px;
    background-color: rgb(240, 242, 245);
  }
  .dashboard-editor-container {
    .total-font{
      font-size: 40px;
    }
    .title-bar{
      color: #668bbc;
      font-weight: normal;
    }
    .short-title{
      font-weight: normal;
      margin: 0 0 30px 0;
      padding: 0;
      color: #668bbc;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .chart-style{
      background:#fff;
      padding:16px 0px 0 20px;
      margin-bottom:32px;
      &.pad-r-20{
        padding:16px 20px 0 20px;
      }
    }
    .chart-box{
      height: 397px;
    }
    .check-detail{
      position: absolute;
      right: 20px;
      top: 15px;
      color: #9a9a9a;
      cursor: pointer;
    }
    .icon-layer{
      font-size: 34px;
    }

    .green {
      color: #43CAC8;
    }
    .blue {
      color: #36A3F7;
    }
    .red {
      color: #F5506C;
    }
  }
  .ring-progress{
    .ring-box{
      position: relative;
      margin-top: 100px;
      .success-box{
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 300px;
        font-size: 36px;
        color: #67C23A;
      }
    }
    .loading-info{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
    .tips{
      margin: 40px auto 0;
      width: 560px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      border: 1px solid rgb(166, 169, 173);
      border-radius: 5px;
      background: rgb(244, 244, 244);
      color: rgb(144, 147, 153);
    }
    .green{
      color: #67C23A !important;
    }
  }

</style>
